<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '0 0 10px 0' }"
  >
    <div class="flex flex-col !h-full justify-between">
      <div class="flex">
        <slot name="tool"></slot>
      </div>
      <el-divider border-style="dashed" class="m-y-0!" />
      <el-scrollbar viewClass="flex-grow mt-10px p-x-10px">
        <el-row class="mx-0px!"
          ><el-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24"
            :xl="24"
            v-for="(item, index) in list"
            :key="index"
          >
            <CartItem
              :spuItem="item"
              :spuItemInfo="getByCartInfo(item.cartId)"
              :is-sales="getByCartInfo(item.cartId)?.sales"
              v-if="getByCartInfo(item.cartId)?.spuType != 3"
              class="mb-10px! cursor-pointer"
            >
              <template #extInfo>
                <div class="custom-text-16">
                  实售单价:{{ fenToYuan(item.singlePrice) }}元<el-divider
                    direction="vertical"
                  />实售总价:{{ fenToYuan(item.realPrice) }}元
                  <span v-if="item.arrearsPrice > 0" class="color-primary">
                    <el-divider direction="vertical" /> 欠款:{{
                      fenToYuan(item.arrearsPrice)
                    }}元</span
                  >
                </div>
              </template>

              <template #itemButton>
                <div class="h-full! flex flex-col justify-between p-y-5px">
                  <div class="!w-full flex justify-end">
                    <div class="mr-5px">
                      <SystemUserShowcase
                        v-if="rebateType == 1"
                        ref="UserShowcaseRef"
                        v-model:model-value="item.employeeStr"
                        @update:model-value="handelChangeEmployee(item)"
                        :show-system-users="false"
                      />
                    </div>
                    <el-button link type="danger" @click.stop="handleDelete(item)">
                      <Icon icon="ep:delete" :size="24" />
                    </el-button>
                  </div>
                  <el-input-number
                    v-if="!hideNumber.includes(getByCartInfo(item.cartId)?.spuType)"
                    class="meton-input-number w-120px!"
                    v-model="item.count"
                    @click.stop="() => {}"
                    :min="1"
                    @change="
                      (val: number) => {
                        handleChangeNumber(item, val)
                      }
                    "
                  />

                  <div
                    class="!w-full flex justify-end"
                    v-if="
                      !getByCartInfo(item.cartId)?.sales &&
                      !hideChange.includes(getByCartInfo(item.cartId)?.spuType)
                    "
                  >
                    <el-link
                      type="primary"
                      class="custom-text-16"
                      @click.stop="handleUpdatePrice(item)"
                    >
                      <Icon icon="ep:edit-pen" :size="20" class="cursor-pointer" />
                    </el-link>
                  </div>
                  <div v-if="getByCartInfo(item.cartId)?.sales">
                    &nbsp;
                    <!-- 目前仅用于占位 -->
                  </div>
                </div>
              </template>
            </CartItem>
            <CartActivityItem
              v-if="getByCartInfo(item.cartId)?.spuType == 3"
              :spuItem="item"
              :is-sales="getByCartInfo(item.cartId)?.sales"
              class="mb-10px! cursor-pointer"
            >
              <template #extInfo>
                <div class="custom-text-16">
                  实售单价:{{ fenToYuan(item.singlePrice) }}元<el-divider
                    direction="vertical"
                  />实售总价:{{ fenToYuan(item.realPrice) }}元
                  <span v-if="item.arrearsPrice > 0" class="color-primary">
                    <el-divider direction="vertical" /> 欠款:{{
                      fenToYuan(item.arrearsPrice)
                    }}元</span
                  >
                </div>
              </template>

              <template #itemButton>
                <div class="h-full! flex flex-col justify-between p-y-5px">
                  <div class="!w-full flex justify-end">
                    <div class="mr-5px">
                      <SystemUserShowcase
                        v-if="rebateType == 1"
                        ref="UserShowcaseRef"
                        v-model:model-value="item.employeeStr"
                        @update:model-value="handelChangeEmployee(item)"
                        :show-system-users="false"
                      />
                    </div>
                    <el-button link type="danger" @click.stop="handleDelete(item)">
                      <Icon icon="ep:delete" :size="24" />
                    </el-button>
                  </div>
                  <el-input-number
                    v-if="!hideNumber.includes(getByCartInfo(item.cartId)?.spuType)"
                    class="meton-input-number w-120px!"
                    v-model="item.count"
                    @click.stop="() => {}"
                    :min="1"
                    @change="
                      (val: number) => {
                        handleChangeNumber(item, val)
                      }
                    "
                  />

                  <div
                    class="!w-full flex justify-end"
                    v-if="
                      !getByCartInfo(item.cartId)?.sales &&
                      !hideChange.includes(getByCartInfo(item.cartId)?.spuType)
                    "
                  >
                    <el-link
                      type="primary"
                      class="custom-text-16"
                      @click.stop="handleUpdatePrice(item)"
                    >
                      <Icon icon="ep:edit-pen" :size="20" class="cursor-pointer" />
                    </el-link>
                  </div>
                  <div v-if="getByCartInfo(item.cartId)?.sales">
                    &nbsp;
                    <!-- 目前仅用于占位 -->
                  </div>
                </div>
              </template>
            </CartActivityItem>
            <el-divider border-style="dashed" class="my-10px!" />
          </el-col>
        </el-row>
      </el-scrollbar>

      <div class="flex justify-end">
        <slot name="bottom"></slot>
      </div>
    </div>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { fenToYuan } from '@/utils'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
/** 员工选择 */
import SystemUserShowcase from '@/views/shop/components/system/user/systemUserShowcase.vue'

const emit = defineEmits(['handleDelete', 'handleChangeNumber', 'handelEdit'])
defineOptions({ name: 'CartList' })
defineProps({
  // 选中的门店列表
  list: propTypes.arrayOf(propTypes.object).def([]),
  rebateType: propTypes.number
})
import CartItem from './CartItem.vue' //购物车普通商品
import CartActivityItem from './CartActivityItem.vue' //购物车活动商品

import { useShopCartStoreWithOut } from '@/store/modules/shop/cart'
/**
 * 隐藏部分类型商品操作 3 活动 5 付费会员
 */
const hideNumber = ref([3, 5])
const hideChange = ref([3, 5])

const shopCartStore = useShopCartStoreWithOut()
const orderPayload = computed(() => {
  return shopCartStore.getOrderPayload
})
const getByCartInfo = (cartId) => {
  return orderPayload.value.items.find((ele) => {
    return ele.cartId == cartId
  })
}
const handleDelete = (item: any) => {
  emit('handleDelete', item)
}
const handleChangeNumber = (item: any, value: number) => {
  emit('handleChangeNumber', item, value)
}

const handleUpdatePrice = (item: any) => {
  emit('handelEdit', 'updatePrice', item)
}
const handleDebtPrice = (item: any) => {
  emit('handelEdit', 'debtPrice', item)
}
const handelChangeEmployee = (item: any) => {
  emit('handelEdit', 'setEmployee', item)
}
</script>
<style lang="scss">
.meton-input-number {
  .el-input {
    font-size: 16px;
  }
  .el-input__inner {
    font-weight: bold;
  }
}
</style>
